<template>
  <div>
    <div class="my-body">
      <div class="ipt_a">
        <div style="float: left; line-height: 30px" class="tab_font-size">经销商：</div>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
      </div>

      <div class="ipt_a">
        <div style="float: left; line-height: 30px" class="tab_font-size">医院地区：</div>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
      </div>

      
        <el-button type="primary" plain>查询</el-button>
        <el-button>清空</el-button>

        <div style="margin-top: 30px">
          <div>
            <el-button type="primary" @click="area = true" plain>添加</el-button>
            <el-button type="danger" plain>删除</el-button>
          </div>
          <el-dialog
            title="经销商历史订单明细"
            :visible.sync="area"
            width="50%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="申请编号">
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                  <el-button type="primary" style="margin-left: 20px"
                    >刷新</el-button
                  >
                </el-form-item>
                <el-form-item label="申请时间">
                  <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="经销商">
                  <el-input v-model="form.name" style="width: 50px"></el-input>
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                  <el-button
                    type="primary"
                    style="margin-left: 20px"
                    @click="guanlianqy = true"
                    >...</el-button
                  >
                </el-form-item>

                <el-form-item label="医院/地区">
                  <el-input v-model="form.name" style="width: 50px"></el-input>
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                  <el-button
                    type="primary"
                    style="margin-left: 20px"
                    @click="ghyyxz = true"
                    >...</el-button
                  >
                </el-form-item>
                <el-form-item label="授权编号">
                  <el-select v-model="form.region" placeholder="请选择授权编号">
                    <el-option label="PS125656561" value="shanghai"></el-option>
                    <el-option label="PS44544541" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户名称">
                  <el-button type="primary" @click="tiaoxingma = true"
                    >添加</el-button
                  >
                  <el-button>删除</el-button>
                  <el-button>清空</el-button>
                </el-form-item>
                <el-form-item label="产品明细">
                  <template>
                    <el-table
                      :data="tableData"
                      border
                      style="width: 50%; margin-top: 30px"
                     :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                    >
                      <el-table-column prop="senddate" label="型号规格">
                        <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)"
                          >图片</el-button
                        >
                      </el-table-column>
                      <el-table-column prop="enddate" label="产品条码">
                      </el-table-column>

                      <el-table-column prop="enddate" label="序列号">
                      </el-table-column>
                      <el-table-column prop="enddate" label="入库数量">
                      </el-table-column>
                    </el-table>
                  </template>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 200px">返回</el-button>
                  <el-button style="width: 200px" type="primary"
                    >添加</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-dialog>

          <el-dialog
            title="供货医院地区选择"
            :visible.sync="ghyyxz"
            width="12%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <el-button type="primary" @click="yiykeshi = true"
                >医院</el-button
              >
              <el-button type="primary" @click="diquxuanzhe = true"
                >地区</el-button
              >
            </div>
          </el-dialog>
          <el-dialog
            title="供货医院地区选择"
            :visible.sync="diquxuanzhe"
            width="30%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <el-tree
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
            </div>
          </el-dialog>
          <el-dialog
            title="产品入库条码-扫描"
            :visible.sync="tiaoxingma"
            width="50%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <div class="ipt_a">
                <div style="float: left; line-height: 30px">产品类型：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>

              <div class="ipt_a">
                <div style="float: left; line-height: 30px">序列号：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
                <el-button type="primary" plain>添加</el-button>
              </div>

              <div>
                <el-button type="danger" plain>删除</el-button>
                <el-button>清空</el-button>
              </div>
              <template>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%; margin-top: 30px"
                 :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                >
                  <el-table-column fixed prop="bianhao" label="型号类型">
                  </el-table-column>
                  <el-table-column prop="senddate" label="序列号">
                  </el-table-column>

                  <el-table-column prop="province" label="入库数量">
                  </el-table-column>
                </el-table>
              </template>
              <div style="margin-top: 20px">
                000件
                <el-button type="primary">返回</el-button>
                <el-button type="primary">保存</el-button>
              </div>
            </div>
          </el-dialog>

          <el-dialog
            title="供货医院地区选择"
            :visible.sync="tianjianlist"
            width="20%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <div style="width: 100%; height: 200px">
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>

              <el-button type="primary">放弃返回</el-button>
              <el-button type="primary">确认提交</el-button>
            </div>
          </el-dialog>
          <el-dialog
            title="医院科室查询"
            :visible.sync="yiykeshi"
            width="50%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <div class="ipt_a">
                <div style="float: left; line-height: 30px" class="tab_font-size">医院编号：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>

              <div class="ipt_a">
                <div style="float: left; line-height: 30px" class="tab_font-size">医院名称：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>
              <el-button type="primary">查询</el-button>
              <template>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%; margin-top: 30px"
                 :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                >
                  <el-table-column fixed prop="bianhao" label="医院编号">
                  </el-table-column>
                  <el-table-column prop="senddate" label="医院名称">
                  </el-table-column>

                  <el-table-column prop="province" label="科室名称">
                  </el-table-column>
                  <el-table-column prop="address" label="省份">
                  </el-table-column>
                  <el-table-column prop="address" label="地址">
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </el-dialog>
          <el-dialog
            title="关联企业列表"
            :visible.sync="guanlianqy"
            width="50%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <div class="ipt_a">
                <div style="float: left; line-height: 30px" class="tab_font-size">企业编号：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>

              <div class="ipt_a">
                <div style="float: left; line-height: 30px" class="tab_font-size">企业名称：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>
              <el-button type="primary">查询</el-button>
              <template>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%; margin-top: 30px"
                 :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                >
                  <el-table-column fixed prop="bianhao" label="企业编号">
                  </el-table-column>
                  <el-table-column prop="senddate" label="企业名称">
                  </el-table-column>

                  <el-table-column prop="province" label="授权产品类型">
                  </el-table-column>
                  <el-table-column prop="address" label="组织代码">
                  </el-table-column>
                  <el-table-column prop="address" label="税号">
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </el-dialog>
          <template>
            <el-table
              :data="tableData"
              border
              style="width: 100%; margin-top: 30px"
             :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            >
              <el-table-column fixed prop="bianhao" label="申请编号">
              </el-table-column>
              <el-table-column prop="senddate" label="申请日期">
              </el-table-column>

              <el-table-column prop="province" label="医院或地区名称">
              </el-table-column>
              <el-table-column prop="address" label="经销商名称">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <div class="my-body">
        <div style="width: 100%; height: 200px; float: left; margin-top: 30px">
          <div style="width: 100%; height: 200px; float: left">
            <div>
              <el-button plain>清空</el-button>
              <el-button type="danger" plain>删除</el-button>
              当前历史订单申请信息:类型【历史产品导入】订货医院【0374(苏州大学附属第一医院)】
              进货方【江西平源医药有限公司)
            </div>

            <template>
              <el-table
                :data="tableData"
                border
                style="width: 50%; margin-top: 30px"
               :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
              >
                <el-table-column prop="senddate" label="产品系列">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >图片</el-button
                  >
                </el-table-column>
                <el-table-column prop="enddate" label="产品类型">
                </el-table-column>
                <el-table-column prop="senddate" label="产品规格">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >图片</el-button
                  >
                </el-table-column>
                <el-table-column prop="enddate" label="序列号">
                </el-table-column>
                <el-table-column prop="enddate" label="订货数量">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </div>
    </div>
  
</template>

<script>
export default {
  data() {
    return {
      area: false,
      tiaoxingma: false,
      tianjianlist: false,
      diquxuanzhe: false,
      guanlianqy: false,
      yiykeshi: false,
      ghyyxz: false,
      tablisty: false,
      tablistya: false,
      tablistyb: false,
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "一般订单",
        },
        {
          value: "3",
          label: "积分订单",
        },
        {
          value: "3",
          label: "样品订单",
        },
        {
          value: "3",
          label: "换货订单",
        },
      ],
      data: [
        {
          label: "一级 1",
        },
      ],
      value1: "",
      value2: "",
      value3: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      radio: "授权医院",
      value: "",
      tableData: [
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
      ],
      checkAll: false,
      checkedCities: [],
      cities: [
        "房间隔缺损",
        "室间隔缺损",
        "介入输送装置",
        "动脉导管未闭",
        "抓捕器",
      ],
      isIndeterminate: true,
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(row) {
      console.log(row);
    },
    handleCheckAllChange(val) {
      const cityOptions = ["上海", "北京", "广州", "深圳"];
      console.log(val);
      this.checkedCities = val ? cityOptions : [];

      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 300px;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}
</style>